<template>
  <div class="shop-info-container">
    <div class="shop-info-name">
      <van-image round width="50" :src="shopInfo.shopLogo"></van-image>
      <span>{{shopInfo.name}}</span>
    </div>
    <div class="shop-info-other">
      <div class="left">
        <div class="sells">
          <div>{{shopInfo.cSells | cSellsFilter}}</div>

          <span>总销量</span>
        </div>
        <div class="goods">
          <div>{{shopInfo.cGoods}}</div>
          <span>全部宝贝</span>
        </div>
      </div>
      <div class="right">
        <div class="desc" v-for="(item,index) of shopInfo.score" :key="index">
          <span>{{item.name}}</span>
          <span :style="item.isBetter?'color: var(--color-tint)':'color: #42b983'">{{item.score}}</span>
          <span :style="item.isBetter?'background-color: var(--color-tint)':'background-color: #42b983'">{{item.isBetter?"高":"低"}}</span>
        </div>
      </div>
    </div>
    <div class="btn">
      <van-button color="#" block round hairline plain>
        <span style=" color: darkgray">进店逛逛</span>
      </van-button>
    </div>
    <van-divider></van-divider>
  </div>
</template>

<script>
  export default {
    name: "DetailShopInfo",
    props: {
      shopInfo: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    filters: {
      cSellsFilter(value) {
        let result = value;
        if (value > 10000) {
          result = (result / 10000).toFixed(1) + "万";
        }
        return result;
      }
    }
  }
</script>

<style scoped>
  .shop-info-container {
    padding: 0px 8px 10px 8px;
  }

  .shop-info-name {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .shop-info-name span {
    font-size: 18px;
    margin-left: 10px;
  }

  .shop-info-other {
    display: flex;
    align-items: center;
    font-size: 15px;
    margin-bottom: 10px;
  }

  .shop-info-other .left {
    flex: 1;
    display: flex;
    justify-content: space-evenly;

  }

  .sells {
    text-align: center;
  }

  .goods {
    text-align: center;
  }

  .goods div {
    margin-bottom: 5px;
  }

  .sells div {
    margin-bottom: 5px;
  }

  .shop-info-other .right {
    flex: 1;
  }

  .shop-info-other .right .desc {
    padding: 5px;
    margin-left: 30px;
    display: flex;
    justify-content: space-between;
  }

  .desc :last-child {
    color: white;
  }

  .btn {
    width: 60%;
    margin: auto;

  }

</style>
